<template>
  <el-card :body-style="{padding:'0 5px 10px 5px'}" style="margin-top: 10px" >
    <template #header>
      <div class="m-flex m-flex-row m-aligns-center m-line-height-2">
        <p class="m-text-color-primary m-tb-5 m-ml-10 m-font-weight-700">{{ $t('mes.ShiftDataSum') }}</p>
        <el-tag effect="light" class="m-ml-10" >{{ queryParams.shiftCode || shiftCode}}</el-tag>
      </div>
    </template>
    <el-row class="content-wrapper" :gutter="20">
      <el-col class="item-box" :span="4">
        <el-card shadow="hover" class="data-card" :body-style="borderStyle">
          <div class="content">
            <div class="data-wrapper m-flex m-justify-center m-flex-col">
              <div class="title text-info">
                {{ queryParams.productionLineCode || '-' }}
              </div>
              <div class="title text-primary"> {{ $t('mes.thOutput') }}</div>
              <div class="value">
                <count-to :decimals="2" :startVal='total.ProduceQty.start' :endVal='total.ProduceQty.end'
                          prefix="" suffix=""
                          :duration='total.ProduceQty.duration'></count-to>
                <span class="unit">pcs</span>
              </div>
            </div>
            <div class="chart-wrapper">
              <liquid-fill :myStyle="myStyle" :num="Number(data.ProduceQtyPer || 0)"></liquid-fill>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="item-box" :span="4">
        <el-card shadow="hover" class="data-card" :body-style="borderStyle">
          <div class="content">
            <div class="data-wrapper m-flex m-justify-center m-flex-col">
              <div class="title text-info">
                {{ queryParams.productionLineCode || '-' }}
              </div>
              <div class="title text-primary">{{ $t('mes.pvcInput') }}</div>
              <div class="value">
                <count-to :decimals="2" :startVal='total.PvcInputQty.start' :endVal='total.PvcInputQty.end'
                          prefix="" suffix=""
                          :duration='total.PvcInputQty.duration'></count-to>
                <span class="unit">pcs</span>
              </div>
            </div>
            <div class="chart-wrapper">
              <liquid-fill :myStyle="myStyle" :num="Number(data.PvcInputQtyPer || 0)"></liquid-fill>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="item-box" :span="4">
        <el-card shadow="hover" class="data-card" :body-style="borderStyle">
          <div class="content">
            <div class="data-wrapper m-flex m-justify-center m-flex-col">
              <div class="title text-info">
                {{ queryParams.productionLineCode || '-' }}
              </div>
              <div class="title text-primary">{{ $t('mes.lvtInput') }}</div>
              <div class="value">
                <count-to :decimals="2" :startVal='total.LvtInputQty.start'
                          :endVal='total.LvtInputQty.end'
                          prefix="" suffix=""
                          :duration='total.LvtInputQty.duration'></count-to>
                <span class="unit">pcs</span>
              </div>
            </div>
            <div class="chart-wrapper">
              <liquid-fill :myStyle="myStyle" :num="Number(data.LvtInputQtyPer || 0)"></liquid-fill>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="item-box" :span="4">
        <el-card shadow="hover" class="data-card" :body-style="borderStyle">
          <div class="content">
            <div class="data-wrapper m-flex m-justify-center m-flex-col">
              <div class="title text-info">
                {{ queryParams.productionLineCode || '-' }}
              </div>
              <div class="title text-primary" style="line-height: 1.2">{{ $t('mes.adhesiveInput') }}</div>
              <div class="value">
                <count-to :decimals="2" :startVal='total.GlueInputQty.start' :endVal='total.GlueInputQty.end'
                          prefix="" suffix=""
                          :duration='total.GlueInputQty.duration'></count-to>
                <span class="unit">kg</span>
              </div>
            </div>
            <div class="chart-wrapper">
              <liquid-fill :myStyle="myStyle" :num="Number(data.GlueInputQtyPer || 0)"></liquid-fill>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="item-box" :span="4">
        <el-card shadow="hover" class="data-card" :body-style="borderStyle">
          <div class="content">
            <div class="data-wrapper m-flex m-justify-center m-flex-col">
              <div class="title text-info">
                {{ queryParams.productionLineCode || '-' }}
              </div>
              <div class="title text-primary" style="line-height: 1.2">LVT {{ $t('mes.clasp') }}</div>
              <div class="value">
                <count-to :decimals="2" :startVal='total.LVTStandardDeductionQTY.start'
                          :endVal='total.LVTStandardDeductionQTY.end'
                          prefix="" suffix=""
                          :duration='total.LVTStandardDeductionQTY.duration'></count-to>
                <span class="unit">pcs</span>
              </div>
            </div>
            <div class="chart-wrapper">
              <liquid-fill :myStyle="myStyle" :num="Number(data.LVTStandardDeductionQTYPer || 0)"></liquid-fill>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="item-box" :span="4">
        <el-card shadow="hover" class="data-card" :body-style="borderStyle">
          <div class="content">
            <div class="data-wrapper m-flex m-justify-center m-flex-col">
              <div class="title text-info">
                {{ queryParams.productionLineCode || '-' }}
              </div>
              <div class="title text-primary" style="line-height: 1.2">PVC {{ $t('mes.clasp') }}</div>
              <div class="value">
                <count-to :decimals="2" :startVal='total.PVCStandardDeductionQTY.start'
                          :endVal='total.PVCStandardDeductionQTY.end'
                          prefix="" suffix=""
                          :duration='total.PVCStandardDeductionQTY.duration'></count-to>
                <span class="unit">pcs</span>
              </div>
            </div>
            <div class="chart-wrapper">
              <liquid-fill :myStyle="myStyle" :num="Number(data.PVCStandardDeductionQTYPer || 0)"></liquid-fill>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { CountTo } from 'vue3-count-to'
import liquidFill from '@/components/common/liquidFill'

export default {
  name: 'lineSum',
  inject: ['queryParams', 'shiftCode'],
  props: {
    data: {
      type: Object,
      default: () => {
        //
        return {
          ProduceQty: 0,
          PvcInputQty: 0,
          LvtInputQty: 0,
          GlueInputQty: 0,
          LVTStandardDeductionQTY: 0,
          PVCStandardDeductionQTY: 0
        }
      }
    }
  },
  components: {
    CountTo,
    liquidFill
  },
  setup (props) {
    const total = reactive({})
    const activeLine = ref('JCPDLine1')
    const borderStyle = ref({ padding: '5px 15px' })
    const myStyle = {
      width: '100px',
      height: '100px',
      marginTop: '10px'
    }
    // 添加监听watch
    const typeArr = ['ProduceQty', 'PvcInputQty', 'LvtInputQty', 'GlueInputQty', 'LVTStandardDeductionQTY', 'PVCStandardDeductionQTY']
    typeArr.forEach(function (str, index) {
      total[str] = {
        start: 0,
        duration: 2000,
        ...{ end: props.data[str] || 0 }
      }
      if (str) {
        watch(() => props.data[str], () => {
          total[str].start = total[str].end
          total[str].end = props.data[str]
        })
      }
    })
    console.log(props.data,'props')
    return {
      total,
      activeLine,
      borderStyle,
      myStyle
    }
  }
}
</script>

<style scoped lang="scss">
.myChart {
  width: 100px;
  height: 100px;
}

.content-wrapper {
  padding: 2px 0;
  height: 100%;

  .el-card__body {
    padding: 20px;
  }

  .data-card {
    border-radius: 10px;
    color: #999;

    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .data-wrapper {
      }

      .chart-wrapper {
        margin-left: 10px;
      }

      .title {
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 2px;
      }

      .text-info {
        color: #e6a23c;

        line-height: 1.5;
      }

      .text-primary {
        color: var(--el-color-primary);
        line-height: 1.8;
        font-size: 16px;
      }

      .value {
        font-weight: 700;
        font-size: 22px;
        color: black;
        line-height: 1.5;
      }

      .total {
        font-weight: 700;
        font-size: 14px;
      }
    }
  }
}

.unit {
  font-size: 10px;
  margin-left: 2px;
}
</style>
